<template>
<div>
<v-dialog
    v-model="loginDialogShow"
    persistent
    width="500"
>
    <v-card>
    <v-card-title class="headline">{{ headline }}</v-card-title>
    <div class="login-box">
        <v-text-field
        v-model="form.username"
        :label="formlabel[formlabelCount][0]"
        placeholder="用户名"
        ></v-text-field>
        <v-text-field
        v-model="form.password"
        :label="formlabel[formlabelCount][1]"
        placeholder="密码"
        :error-messages="error_message"
        :error="error"
        ></v-text-field>
    </div>
    <v-card-actions>
        <v-btn color="primary" text @click="signup = !signup">{{ formlabel[formlabelCount][3] }}</v-btn>
        <v-spacer></v-spacer>
        <v-btn
        color="primary"
        @click="submit"
        :disabled="loading"
        :loading="loading"
        >{{ formlabel[formlabelCount][2] }}</v-btn>
    </v-card-actions>
    </v-card>
</v-dialog>

</div>
</template>
<script>

export default {
    name: "Login",

    data: ()=>({
        headline: "请登录",
        formlabelCount: 0,
        formlabel: [["用户名","密码", "登录", "注册"],["新的用户名","密码","注册", "登录"]],
        form: {username: "", password: "", signup: false},
        loading: false,
        loginDialogShow: true,
        signup: false,
        error_message: [],
        error: false,
    }),

    methods: {
        submit(e) {
            this.loading = true
            this.form.signup = this.signup
            console.log("ajax="+JSON.stringify(this.form))
            this.$axios.post("/api/Login.php", "ajax="+JSON.stringify(this.form))
            .then((data) => {
                console.log(data.data)
                if (data.data === "ok_signup" || data.data === "ok_signin") {
                    localStorage.setItem("user", "gkd")
                    this.loginDialogShow = false
                } else {
                    this.error = true;
                    if (this.signup) {
                        this.error_message = ["用户名已经存在"]
                    } else {
                        this.error_message= ["用户名或者密码错误"]
                    }
                }
            }).catch((e) => {
                console.log(e)
                this.error = true;
                this.error_message= ["网络错误"]
            }).finally((e)=>{
                this.loading = false
            })
        },
    },

    watch: {
        signup(v) {
            if (v) {
                this.headline = "请注册"
                this.formlabelCount = 1
            } else {
                this.headline = "请登录"
                this.formlabelCount = 0
            }
        }
    },

    mounted() {
        this.$bus.$on('showLoginDialogEvent', content => {
            this.loginDialogShow = content
        })
    },

    created() {
        if (localStorage.getItem("user") === "gkd") {
            this.loginDialogShow = false
        }
    },
    
    beforeDestroy() {
        this.$bus.$off('showLoginDialogEvent')
    }
}
</script>
<style scoped>
.login-box {
    padding: 0 20px;
}
</style>